import React from 'react';
import makeStyles from "@material-ui/core/styles/makeStyles";

import Card from "@material-ui/core/Card";
import CardHeader from '@material-ui/core/CardHeader';
import CardMedia from '@material-ui/core/CardMedia';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import CardActions from "@material-ui/core/CardActions";
import IconButton from "@material-ui/core/IconButton";
import FavoriteIcon from '@material-ui/icons/Favorite';
import ShareIcon from '@material-ui/icons/Share';
import {useHistory} from 'react-router-dom'
import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';

const useStyles = makeStyles(theme => ({
    list: {
        marginTop: theme.spacing(2),
    },
    media: {
        width: 178,
        height: 267,
        flexShrink: 0,  // 防止图片被挤压，如果右边的内容过多
        '&:hover': {
            cursor: "pointer",
        }
    },
    card: {
        display: "flex",
        marginBottom: theme.spacing(6),
        border: "none",
        boxShadow: "none",

        // 手机端减小下边距
        [theme.breakpoints.down('sm')]: {
            marginBottom: theme.spacing(2),
            // 手机左右留一点边距，并居中
            width: "95%",
            margin: "auto",
        }
    },
    cardContent: {
        // 手机端不显示图书简介
        [theme.breakpoints.down('sm')]: {
            display: "none"
        }
    },
    cardHeader: {
        '&:hover': {
            cursor: "pointer",
        }
    },
    numViews: {
        fontSize: theme.spacing(2),
        marginLeft: theme.spacing(1),
    },
    cardBody: {
        padding: theme.spacing(1),
        [theme.breakpoints.down('sm')]: {
            padding: 0,
            marginLeft: 0,
        }
    }
}))


export default function BaseBookList({books}) {
    const classes = useStyles()
    const history = useHistory()

    return (
        <div className={classes.list}>
            {!!books && books.map(book => (
                <Card className={classes.card} square={true} key={book.title}>
                    <CardMedia
                        className={classes.media}
                        image={book.cover_path}
                        title={book.title}
                        onClick={() => history.push(`/books/${book.title}`)}
                    />

                    <div className={classes.cardBody}>

                        <CardHeader
                            title={book.title}
                            subheader={`[${book.country}] / ${book.author} / ${book.publisher} / ${book.pub_year}`}
                            className={classes.cardHeader}
                            onClick={() => history.push(`/books/${book.title}`)}
                        />

                        <CardContent className={classes.cardContent}>
                            <Typography variant="body2" color="textSecondary" component="p">
                                {book.description}
                            </Typography>
                        </CardContent>

                        <CardActions disableSpacing>
                            <IconButton>
                                <VisibilityOutlinedIcon/>
                                <Typography
                                    variant="body1"
                                    className={classes.numViews}
                                >
                                    {book.num_views}
                                </Typography>
                            </IconButton>
                            <IconButton>
                                <FavoriteIcon color="disabled"/>
                            </IconButton>
                            <IconButton>
                                <ShareIcon color="disabled"/>
                            </IconButton>
                        </CardActions>
                    </div>
                </Card>
            ))}
        </div>
    )
};
